<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
<title>產品管理</title>
<%@ include file="/common/header.jsp" %>
<style type="text/css">
#main-content table thead th.th-9{
	width: 210px;
}
#main-content table td.op-1,
#main-content table td.op-2,
#main-content table td.op-3,
#main-content table td.op-4{
 padding: 10px 2px;
 width : 50px;
}
.form-layout dt.quarter {
    width: 60px;
}
.form-layout dd.narrow {
	padding-right: 4px;
    width: 100px;
}
.form-layout dd.narrow input {
	padding-right: 4px;
    width: 90px;
}
.form-layout dd .button, #add{
	margin:0 2px;
}
</style>
    <!-- Page Head -->
    <div class="content-box">
      <!-- Start Content Box -->
      <div class="content-box-header">
        <h3>產品列表</h3>
        <div class="clear"></div>
      </div>
      <!-- End .content-box-header -->
      <div class="content-box-content">
      	<form action="" name="searchForm"  method="post">
          <dl class="form-layout">
          	<dt class="quarter">產品:</dt>
          	<dd class="narrow"><input type="text" class="text-input" name="productName"  id="productName"/></dd>
          	<dt class="quarter">型號:</dt>
          	<dd class="narrow"><input type="text" class="text-input" name="productModel"  id="productModel"/></dd>
          	<dt class="quarter">審核狀態:</dt>
          	<dd class="quarter"><select name="productStatus" id="productStatus" style="width:100%; padding:0">
          		<option value="">請選擇...</option>
          		<option value="0">未發佈</option>
          		<option value="1">已發佈</option>
          	</select></dd>
          	<dt class="quarter">語言:</dt>
          	<dd class="quarter">
          	<select name="languageId" id="languageId" style="width:100%; padding:0">
              	<option value="">請選擇...</option>
              	<c:forEach items="${language }"  var="l">
              		<option value="${l.languageId }"  data-key="${l.languageKey }" >${l.languageName }</option>
              	</c:forEach>
          	</select></dd>
          	<dd class="quarter"><input class="button" type="button" value="搜索" />
          </dl>
          </form>
          <input class="button" id="add" type="button" value="添加產品" />
          <table id="datatable">
            <thead>
              <tr>
                <th>
                  <input class="check-all" type="checkbox" />
                </th>
                <th class="th-1" ><a href="javascript:void(0)"  class="sort" title="productNo">編號</a></th>
                <th class="th-2" ><a href="javascript:void(0)"  class="sort" title="productModel">型號</a></th>
                <th class="th-3" ><a href="javascript:void(0)"  class="sort" title="productName">產品</a></th>
                <th class="th-4" ><a href="javascript:void(0)"  class="sort" title="categoryName">類別</a></th>
                <th class="th-5" ><a href="javascript:void(0)"  class="sort" title="productStatus">審核狀態</a></th>
                <th class="th-6" ><a href="javascript:void(0)"  class="sort" title="productDate">日期</a></th>
                <th class="th-7" ><a href="javascript:void(0)"  class="sort" title="languageId">語言</a></th>
                <!--<th class="th-8" ><a href="javascript:void(0)"  class="sort" title="modifiedOn">修改時間</a></th>  -->
                <th class="th-9" colspan="4">操作</th>
              </tr>
            </thead>
            <tfoot>
              <tr>
                <td colspan="12">
                  <div class="bulk-actions align-left">
                    <select id="batchOp" name="batchOp">
                      <option value="">請選擇操作...</option>
                      <option value="Delete">刪除</option>
                      <option value="moveCategory">改變類別</option>
                    </select>
                    <a class="button batchOp" href="javascript:void(0)">應用改變</a>
                  </div>
				<%@ include file="/common/pagination.jsp" %>
                </td>
              </tr>
            </tfoot>
            <tbody>            
            </tbody>
          </table>        
      </div>
      <div id="chooseCategory" style="display:none">
      	<p>
              <label for="choose_languageId" >語言：</label>
              <select name="choose_languageId"  id="choose_languageId" class="bigger-input">
              	<c:forEach items="${language }"  var="l">
              		<option value="${l.languageId }"   data-key="${l.languageKey }">${l.languageName }</option>
              	</c:forEach>
              </select>
          </p> 
      	  <p>
              <label for="choose_productCategoryId" >類別：</label>
              <select name="choose_productCategoryId"  id="choose_productCategoryId" class="bigger-input">
              	<option value="">请选择...</option>
              	<c:forEach items="${zhCategory }"  var="c">
              		<c:if test="${!empty c.subCategorys }">
              		<optgroup class="zh_chooseCategory" label="${c.categoryName }"></optgroup>
              		<c:forEach items="${c.subCategorys }"  var="sc">
	              		<option class="zh_chooseCategory" value="${sc.productCategoryId }">${sc.categoryName }</option>
              		</c:forEach>
              		</c:if>
              	</c:forEach>
              	 <c:forEach items="${enCategory }"  var="c">
              		<c:if test="${!empty c.subCategorys }">
              			<optgroup class="en_chooseCategory" label="${c.categoryName }"></optgroup>
	              		<c:forEach items="${c.subCategorys }"  var="sc">
	              		<option class="en_chooseCategory" value="${sc.productCategoryId }">${sc.categoryName }</option>
              			</c:forEach>
              		</c:if>
              	</c:forEach>
              </select>
            </p>
      </div>
      <!-- End .content-box-content -->
    </div>
    <!-- End .content-box -->    
    <div class="clear"></div>
 <%@ include file="/common/footer.jsp" %>
 <script type="text/javascript" src="${ctx}/extends/jquery.json-2.3.js?_=${radom}"></script>
 <script type="text/javascript" src="${ctx}/js/pagination.js?_=${radom}"></script>
 <script type="text/javascript" src="${ctx}/js/productList.js?_=${radom}"></script>
 <script type="text/javascript">
 $(function(){
	 $("#main-nav a[data-menu='product']").addClass("current").click();
	 $("#main-nav a[data-menu='productList']").addClass("current");
 })
 </script>